当サイトの画像配信がHTTP/3 (QUIC) サポートになりました

当サイトの画像配信がHTTP/3 (QUIC) サポートになりました

HTTP/3をサポートした CloudFrontを 当ブログサイトの画像配信に導入しました。
Clock Icon2022.08.18

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

AWSのCDNサービス、CloudFront が HTTP/3をサポートするアップデートが2022年8月15日にありました。

当ブログサイト(DevelopersIO)の画像配信に利用している CloudFrontで、HTTP/3 サポートを有効化しましたので、その結果を報告させていただきます。

構成図

CloudFront設定

CloudFrontダッシュボードを利用し、対象ディストリビューションの設定を行いました。

サポートされているHTTPバージョンとして「HTTP/3」を追加しました。

HTTP/3サポートを有効にしたCloudFront、レスポンスヘッダー「alt-svc: h3=":443"」を戻します。

動作確認

クライアント情報

  • MacBook Pro (13-inch, M1, 2020)
  • システムのバージョン: macOS 12.5 (21G72)
  • ブラウザ
    • Google Chrome バージョン: 104.0.5112.101(Official Build) (arm64)
    • JavaScript 使用を許可しない (プライバシーとセキュリティ → サイトの設定)
  • ネットワーク情報

HTTP3サポート切り替え

「Experimental QUIC protocol」(chrome://flags) を利用し、HTTP/3 の 有効、無効を切り替えました。

確認ページ

以下の記事ページ (100KB前後の画像ファイルが35個存在) を利用し、

Chromeブラウザの開発ツールで、「キャッシュの消去とハード読み込み」操作を行い、Network性能を確認しました。

結果

HTTP/3

  • Load: 170ms

  • プロトコル: 7ファイル目までは「HTTP/2」 (h2)、8ファイル目から、「HTTP/3」(h3)が利用されていました。

  • h3切り替え後、高い並列数でダウンロードされました。

  • 最後に転送が完了した画像のExplanationは123msでした。

HTTP/2

  • Load: 376ms

  • h2では、一つのConnectionIDが利用されていました。

  • 最後に転送が完了した画像の Explanationは、323.76ms。 307msがqueuingによる待機時間でした。

HTTP/3利用状況

HTTP/3サポートを有効化した後、CloudFrontの標準アクセスログを対象に、Athenaを利用してHTTPバージョン別の集計を試みました。

SELECT
    http_version,
    COUNT(1) AS request_count
FROM "default"."cloudfront_logs"
WHERE "date" BETWEEN DATE '2022-08-16' AND DATE '2022-08-17'
GROUP BY http_version

Amazon CloudFront ログのクエリ

サポート前

「HTTP/2」の利用率は90%強でした。

サポート後

利用率は、「HTTP/3」は40%強、「HTTP/2」は50%弱となりました。

まとめ

HTTP/3 で利用される転送プロトコルのQUIC、UDPの採用や、接続効率の最適化など通信性能の改善が期待できます。

 CloudFlare ラーニングセンター: HTTP/3とは?

HTTP/3 を有効にしたCloudFront、デフォルトの転送プロトコルは従来どおり (HTTP/2、HTTP/1.x)が利用されます。 HTTP/3 をサポートするクライアント側が転送プロトコルを切り替える方式である事から互換性の問題は生じにくいと推測されますが、 不特定多数、多様なクライアントから利用されるワークロードでは、十分な検証を実施してご利用ください。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.